<template>
  <div id="home">
      <nav-bar class="nav">
            <p slot="center">购物街</p>
      </nav-bar>
      <!-- 解决bs不吸顶的方法 -->
      <tabControl  :titles="['流行', '新款', '精选']" @tabClick="tabClick" 
        ref="tabControl1" :class="{fixed:istabFixed}" v-show="istabFixed"
        ></tabControl>
      <scroll class="content" ref="scroll" :probe-type="3" @scroll-hd="contentScroll"  :pull-up-load="true"
        @pulling-up="loadMore"
      >
        <swiper  @Swiper="swiperLoad"></swiper>
        <feature-view/>
        <recommend-view :recommends="recom"></recommend-view>
        <tabControl  :titles="['流行', '新款', '精选']" @tabClick="tabClick" 
        ref="tabControl2"
        ></tabControl>
        <goods-list :goods="showGoods"></goods-list>
      </scroll>
      <!-- 
          .native 什么时候使用（子组件）？
          在我们需要监听一个组件的原生事件时，必须给对应事件加上.native修饰符才能监听
      -->
      <back-top @click.native="backTop" v-show="show"/>
  </div>
</template>

<script>
// 公用组件
import NavBar from 'components/common/navbar/NavBar'
import Swiper from 'components/common/swiper/Swiper'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backTop/BackTop'
//子组件
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'
//方法
import { getHomeMultidata, getHomeGoods } from 'network/home'

export default {
  name: 'Home',
  data(){
    return {
       recom:[],
       goods:{
         'pop':{page:0,list:[]},//流行
         'new':{page:0,list:[]},//新款
         'sell':{page:0,list:[]},//精选
       },
       curType:'pop',
       show:false,
       tabOffsetTop:0,
       istabFixed:false,
       saveY:0,
       homeItemListener:null
    }
  },
  computed: {
      showGoods(){
        return this.goods[this.curType].list
      }
  },
  created() {
    this.HomeMultidata()
    this.HomeGoods('pop')//流行
    this.HomeGoods('new')//新款
    this.HomeGoods('sell')//精选
  },
  mounted() {
      //监听item中的事件总线
       const result = this.debounce(()=>{console.log('图片监听到了~')},500)
       this.homeItemListener =()=>{
         result()
       }
       this.$bus.$on('load',this.homeItemListener)
  },
  //保留位置
  activated() {
    this.$refs.scroll.scroll.refresh()
    this.$refs.scroll.scrollTop(0,this.saveY,0)
  },
  deactivated() {
    //保存y值
     this.saveY=this.$refs.scroll.scroll.y
     console.log(this.saveY)
     //取消全局事件的监听
    this.$bus.$off('imageLoad',this.homeItemListener)
  },
  components: {
    NavBar,
    Swiper,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,
    RecommendView,
    FeatureView
   },
   methods:{
     //防抖
     debounce(func,delay){
          let timer=null
          return function(...args){
             if(timer) clearTimeout(timer)
             timer=setTimeout(()=>{
                func.apply(this,args)
             },delay)
          }
     },
     //事件监听
     tabClick(index){
       console.log(index)
        switch (index){
          case 0:
               this.curType='pop'
            break;
          case 1:
             this.curType='new'
            break; 
          case 2:
             this.curType='sell'
            break;
          default:
            break;
        }
        this.$refs.tabControl1.currentIndex=index;
        this.$refs.tabControl2.currentIndex=index;
     },
     //返回顶部~
     backTop(){
       this.$refs.scroll.scrollTop(0,0,1000)
       console.log(this.$refs.scroll.message)
       console.log(this.$refs.scroll)
     },
     //监听滚动
     contentScroll(position){
      //console.log(position)
      if(Math.abs(position.y)>1000){
        this.show=true
      }else{
        this.show=false
      }
      //吸顶
    this.istabFixed=(-position.y)>this.tabOffsetTop
     },
     //上拉加载更多
     loadMore(){
           this.HomeGoods(this.curType)
           this.$refs.scroll.scroll.refresh()
     },
     swiperLoad(){
        this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
        console.log(this.$refs.tabControl2.$el.offsetTop)
     },
     //网络请求
     //1.请求多个数据
      HomeMultidata(){
          getHomeMultidata().then(res=>{
             this.recom=res.data.recommend.list;
          })
      },
      //2.goods请求
      HomeGoods(type){
        //this.goods[type].list=[];
        const page=this.goods[type].page+1
          getHomeGoods(type,page).then(res=>{
             this.goods[type].list.push(...res.data.list)
             this.goods[type].page+=1
             //上拉加载更多
             this.$refs.scroll.finishPullUp()
          })
      }
   },
}
</script>
<style scoped>
#home{
  /* padding-top: 44px; */
  position: relative;
  height:100vh;
  overflow-y: hidden;
}
.nav{
  background: #da7a17;
  text-align: center;
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
.content{
  /* 还可以使用定位来确定内容的高度~ */
  margin-top:44px;
  height:calc(100% - 93px);
  overflow: hidden;
}
.tab-control {
    /* position: sticky;
    top: 44px; */
    z-index: 9;
  }
  .fixed{
   position: fixed;
    top:44px;
    left:0;
    z-index: 100;
  }
</style>
